<template>
  <!-- 个人中心 -->
  <div class="customer_box">
    <div class="dialog_box">
      <!-- 右边 -->
      <div class="dialog_box_list">
        <!-- 头像 -->
        <div class="headimg">
          <el-avatar
            style="width: 100px; height: 100px"
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
          ></el-avatar>
        </div>
        <!-- 信息 -->
        <div class="myself">
          <ul>
            <li style="list-style: none">
              <span>姓名：</span><span>{{ data.real_name }}</span>
            </li>
            <li style="list-style: none">
              <span>角色：</span>
              <span v-if="data.role == 0">艺术家</span>
              <span v-if="data.role == 1">普通用户</span>
            </li>
          </ul>
        </div>
        <div class="eidt_Password">
          <el-button type="success" @click="eidtPassword">修改密码</el-button>
        </div>
        <div class="leave_btn">
          <el-button type="primary" @click="signOut">退出登录</el-button>
        </div>
      </div>
      <!-- 左边 -->
      <div>
        <p class="title">修改信息</p>
        <div class="fomedata">
          <el-form
            ref="infoData"
            :label-position="labelPosition"
            label-width="80px"
            :model="infoData"
          >
            <el-form-item label="真实姓名">
              <el-input v-model="infoData.real_name"></el-input>
            </el-form-item>
            <el-form-item label="手机号">
              <el-input v-model="infoData.phone"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="infoData.email"></el-input>
            </el-form-item>
            <el-form-item label="个人简介">
              <el-input type="textarea" v-model="infoData.bio"></el-input>
            </el-form-item>
            <!-- 图片上传组件 -->
            <!-- <div class="pic"> -->
              <!-- 图片上传组件 -->
              <!-- <el-form-item label="图片">
                <el-upload
                  action="#"
                  list-type="picture-card"
                  :limit="1"
                  :on-exceed="handleExceed"
                  :on-change="beforeUpload1"
                  :auto-upload="false"
                >
                  <i slot="default" class="el-icon-plus"></i>
                  <div slot="file" slot-scope="{ file }">
                    <img
                      class="el-upload-list__item-thumbnail"
                      :src="file.url"
                      alt=""
                    />
                  </div>
                </el-upload>
              </el-form-item>
            </div> -->
            <el-button class="eidt_btn" type="primary" @click="eidtinfo"
              >修改信息</el-button
            >
          </el-form>
        </div>
      </div>
      <!-- 修改密码弹窗 -->
      <div>
        <el-dialog
          title="修改密码"
          :visible.sync="open"
          width="400px"
          :before-close="cancel"
        >
          <el-form
            :model="pwdForm"
            :inline="true"
            :rules="rules"
            class="visible"
            label-width="120px"
            ref="pwdForm"
          >
            <el-form-item label="旧密码">
              <el-input v-model="pwdForm.current_password"></el-input>
            </el-form-item>
            <el-form-item label="新密码">
              <el-input v-model="pwdForm.new_password"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="validation">确定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import { Message } from "element-ui";
import Cookies from "js-cookie";
import { userLogout, updatapwd } from "@/api/login.js";
import { getuser, putuser } from "@/api/user.js";
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      data: {
        real_name: "",
        role: "",
      },
      //   对齐方式
      labelPosition: "right",
      // 表单数据
      infoData: {
        id: "",
        real_name: "",
        phone: "",
        email: "",
        bio:""
      },
      // 用户选择的图片
      // file: null,
      // 是否显示弹出层
      open: false,
      // 弹出表单
      pwdForm: {
        current_password: "",
        new_password: "",
      },
      // 验证规则
      rules: {
        current_password: [
          { required: true, message: "请输入正确的旧密码", trigger: "blur" },
        ],
        new_password: [
          { required: true, message: "请输入新密码", trigger: "blur" },
        ],
      },
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  created() {
    this.data.real_name = this.user.real_name;
    this.data.role = this.user.role;
    this.getUserInfo();
  },
  methods: {
    ...mapActions(["resetState"]),
    // 获取用户信息
    getUserInfo() {
      getuser(this.user.id)
        .then((res) => {
          console.log(res);
          this.infoData = res.results;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 文件超出提示
    // handleExceed() {
    //   this.$message.warning(`当前限制选择 1 个文件`);
    // },

    // // 图片上传存储
    // beforeUpload1(file) {
    //   this.file = file.raw;
    //   return false;
    // },
    // 修改用户信息
    eidtinfo() {
      putuser(this.user.id, this.infoData)
        .then((res) => {
          console.log(res);
          if (res.message == "用户信息更新成功") {
            this.getUserInfo();
            Message({
              message: "修改成功",
              type: "success",
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // eidtinfo() {
    //   this.$refs["infoData"].validate((valid) => {
    //     if (valid) {
    //       let formData = new FormData();
    //       // 添加表单信息到formData
    //       Object.keys(this.infoData).forEach((key) => {
    //         formData.append(key, this.infoData[key]);
    //       });
    //       formData.append("avatar", this.file);

    //       putuser(this.user.id,formData)
    //         .then((res) => {
    //           if (res.message == "用户信息更新成功") {
    //             this.getUserInfo();
    //             Message({
    //               message: "修改成功",
    //               type: "success",
    //             });
    //           }
    //         })
    //         .catch((err) => {
    //           this.$message.error("数据格式错误");
    //         });
    //     } else {
    //       this.$message.error("数据格式错误");
    //       return false;
    //     }
    //   });
    // },
    // 修改密码
    eidtPassword() {
      this.open = true;
    },
    // 取消
    cancel() {
      this.open = false;
    },
    // 确定
    validation() {
      this.$refs.pwdForm.validate((valid) => {
        if (valid) {
          updatapwd(this.user.id, this.pwdForm)
            .then((res) => {
              console.log(res);
              //   修改成功
              this.open = false;
              // 提示
              Message({
                message: "修改成功",
                type: "success",
              });
              // 修改密码成功后，退出登录
              this.signOut();
            })
            .catch((err) => {
              console.log(err);
            });
        }
      });
    },
    // 退出登录
    signOut() {
      userLogout().then((res) => {
        if (res.message == "您已成功注销。") {
          localStorage.removeItem("vuex");
          Cookies.remove("token");
          this.resetState(); // 清空vuex状态
          this.$router.push("/login");
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.customer_box {
  position: relative;
  width: 100%;
  height: 86vh;
  background-image: url(../../assets/img/customer_bg.png);
  background-size: cover; /* 可选：根据需要设置背景大小 */
  background-position: center; /* 可选：根据需要设置背景位置 */
  mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0),
    black,
    black,
    black,
    rgba(0, 0, 0, 0)
  );

  .dialog_box {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    width: 60%;
    height: 70vh;
    background: linear-gradient(to bottom, #b6dcfc, #fff, #fff, #fff, #b6dcfc);
    box-shadow: 0 0 10px #b8c9dd;
    border-radius: 16px;
    padding: 20px;
    box-sizing: border-box;
    transition: all 0.5s;

    .dialog_box_list {
      width: 300px;
      height: calc(70vh-40px);
      overflow: auto;
      border: 2px solid #b8c9dd;
      margin-right: 20px;
      border-radius: 10px;

      .headimg {
        width: 100%;
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 15px;
      }

      .myself {
        line-height: 10vh;
        margin-top: 35px;
        font-size: 22px;
      }
      .eidt_btn {
        margin-top: 50px;
        line-height: 0;
      }
      .leave_btn {
        margin-top: 20px;
        line-height: 0;
      }
    }

    .title {
      font-size: 22px;
      margin-top: 15px;
      margin-left: 5px;
    }
    .fomedata {
      margin-top: 70px;
      margin-left: 30px;
    }
  }
}

// @media (max-width: 1400px) {
//   .dialog_box {
//     width: 80% !important;
//   }
// }
</style>
